<h2 mat-dialog-title>AG-GRID 基本用法</h2>
<mat-dialog-content class="mat-typography">
  <h3>示例代码</h3>
  <pre>
    {{code1}}
  </pre>
  <h3>说明</h3>
  <h4>设置样式</h4>
    <p>1. 全局引入格式 <code>@import 'ag-grid-community/dist/styles/ag-grid.css';</code> 和 <code>@import 'ag-grid-community/dist/styles/ag-theme-alpine.css';</code> </p>
    <p>2. 在组合上添加 <code>class="ag-theme-alpine"</code></p>
    <p>第一步中引入的两个css中第二个是可以替换的，可以是 <code>ag-grid-community/dist/styles</code>目录下的任意css文件，或者自己写的样式文件，然后，在组件上修改class属性</p>
  <hr>
  <h4>定义列</h4>
    <p><code>定义第一列显示哪个属性，要如何显示，列头显示什么，每列宽度</code></p>
  <pre>
    {{code2}}
  </pre>
  <p>1. <code>field</code> 代表这一列要显示行数据中的哪个属性值</p>
  <p>2. <code>headerName</code> 代表列名字，如果不设置，那么默认以 <code>field</code>值进行英文分词显示列名</p>
  <p>3. <code>width</code> 列的宽度 </p>
  <p>4. <code>valueGetter</code>,这个属性代表如何获取这一列中的显示值， 需要传入一个function ,这个function 返回string ,或者 是 ValueGetterFunc</p>
  <hr>
  <h4>设置行高</h4>
  <p><code>[rowHeight]="30"</code></p>
  <hr>
  <h4>传入数据</h4>
  <p><code>[rowData]="orderList </code></p>
  <hr>
  <h4>设置列的默认属性</h4>
  <p><code>[defaultColDef]="defaultColDef"</code></p>
  <p>例：</p>
  <pre>
   {{code3}}
  </pre>
  <hr>
  <h3>回调方法</h3>
  <p>表格初始化成功后的回调: <code>(gridReady)="onGridReady($event)"</code>，表格初始化结束的回调，会传入两个参数，其中一个可以用于动态更新表格</p>
  <p>单元格被点击时的回调: <code>(cellClicked)="onCellClicked($event)"</code>， 从这一回调中可以知道你点的哪一行，哪一列，这一单元格的值是什么</p>

</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false">Close</button>
</mat-dialog-actions>
